<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <!-- <a-col :span="4">
                  <a-form-item field="addId" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input hide-button v-model="form.addId" placeholder="卡板开始ID" />
                      <a-input hide-button v-model="form.endId" placeholder="卡板结束ID" />
                    </a-input-group>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input v-model="form.addCard" placeholder="请输入卡板开始卡号" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endCard" hide-label>
                    <a-input v-model="form.endCard" placeholder="请输入卡板结束卡号" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="direct" hide-label>
                    <a-select v-model="form.direct" allow-clear placeholder="请选择卡板类型">
                      <a-option :value="1">直属卡板</a-option>
                      <a-option :value="0">非直属卡板</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="userIds" hide-label>
                    <a-select
                      v-model="form.userIds"
                      placeholder="请选择客户"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                    />
                  </a-form-item>
                </a-col>

                <a-col :span="4">
                  <a-form-item field="states" hide-label>
                    <a-select
                      v-model="form.states"
                      placeholder="请选择卡板状态"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                    >
                      <a-option
                        v-for="item in useCommon.state"
                        :key="item.state"
                        :value="item.state"
                        >{{ item.name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="exceptionType" hide-label>
                    <a-select v-model="form.exceptionType" placeholder="请选择异常状态" allow-clear>
                      <a-option
                        v-for="item in useCommon.error"
                        :key="item.state"
                        :value="item.state"
                        >{{ item.name }}</a-option
                      >
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="pay" hide-label>
                    <a-select v-model="form.pay" placeholder="请选择充值状态" allow-clear>
                      <a-option :value="0">未充值</a-option>
                      <a-option :value="1">已充值</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="systemRealName" hide-label>
                    <a-select
                      v-model="form.systemRealName"
                      placeholder="请选择系统实名状态"
                      allow-clear
                    >
                      <a-option value="-1">未实名</a-option>
                      <a-option value="0">已实名</a-option>
                      <a-option value="1">已失败</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="officialRealName" hide-label>
                    <a-select
                      v-model="form.officialRealName"
                      placeholder="请选择官方实名状态"
                      allow-clear
                    >
                      <a-option value="-1">未知</a-option>
                      <a-option value="0">已实名</a-option>
                      <a-option value="1">未实名</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="cancellation" hide-label>
                    <a-select v-model="form.cancellation" placeholder="请选择注销状态" allow-clear>
                      <a-option :value="0">未注销</a-option>
                      <a-option :value="1">已注销</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="change" hide-label>
                    <a-select v-model="form.change" placeholder="请选择换卡状态" allow-clear>
                      <a-option :value="0">未换卡</a-option>
                      <a-option :value="1">已换卡</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="seriesIds" hide-label>
                    <a-select
                      v-model="form.seriesIds"
                      placeholder="请选择系列"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                        item.showName
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operator" hide-label>
                    <a-select v-model="form.operator" placeholder="请选择运营商" allow-clear>
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addFlowRefreshTime"
                      show-time
                      placeholder="请选择开始刷新时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endFlowRefreshTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFlowRefreshTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFlowRefreshTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endFlowRefreshTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addFlowRefreshTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endFlowRefreshTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endFlowRefreshTime"
                      show-time
                      placeholder="请选择结束刷新时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addCreateTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addCreateTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endCreateTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addCreateTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endCreateTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addPayNumber" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input hide-button v-model="form.addPayNumber" placeholder="开始充值次数" />
                      <a-input hide-button v-model="form.endPayNumber" placeholder="结束充值次数" />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addUpstreamFlow" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select :style="{ width: '50%' }" v-model="types" placeholder="刷新类型">
                        <a-option value="flowRefreshTime">流量刷新</a-option>
                        <a-option value="stateRefreshTime">状态刷新</a-option>
                        <a-option value="realNameRefreshTime">实名刷新</a-option>
                      </a-select>
                      <a-input-number
                        :style="{ width: '50%' }"
                        v-model="typesNum"
                        :precision="0"
                        hide-button
                        placeholder="刷新时间"
                      >
                        <template #suffix>
                          <a-tooltip
                            content="输入0搜索：卡没有刷新过；输入负数搜索：代表超出X小时未刷新过；输入正数：代表X小时内刷新过。"
                            ><icon-question-circle style="cursor: pointer" />
                          </a-tooltip>
                        </template>
                      </a-input-number>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="cards" hide-label>
                    <a-input v-model="form.cards" placeholder="多卡卡号搜索框" allow-clear>
                      <template #suffix>
                        <icon-plus @click="cardsVisible = true" style="cursor: pointer" />
                      </template>
                    </a-input>
                  </a-form-item>
                </a-col>
                <a-col :span="4" :offset="20">
                  <a-form-item content-class=" flex justify-end" field="btns" hide-label>
                    <a-space :size="15">
                      <a-button type="primary" html-type="submit" @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button type="outline" status="warning" :loading="loading" @click="exportDepartments">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
          <a-button type="outline" @click="delimitation">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>卡板分销</template>
          </a-button>
          <a-button type="outline" status="warning" @click="retrieveVisible = true">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>卡板回收</template>
          </a-button>
          <a-button type="outline" status="warning" @click="batchShowFn">
            <template #default>批量操作</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :stripe="(tables.striped as boolean)"
          :data="table.dataList"
          :pagination="false"
          :row-key="rowKey"
          :row-class-name="rowClassNameFun"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :scroll="{ x: 1500 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          @change="handleChange"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
              :sortable="item.sortable"
            >
              <template v-if="item.key === 'total'" #cell="{ record }">
                <span v-if="record.free != undefined">
                  {{ Math.floor(((record.used + record.free) / 1024) * 100) / 100 }} G</span
                >
                <span v-else> 无限</span>
              </template>
              <template v-if="item.key === 'card'" #cell="{ record }">
                <div class="ba">
                  <img
                    class="imgsa"
                    v-if="record.series.operator == 0"
                    src="@/assets/yd.png"
                    alt=""
                  />
                  <img
                    class="imgsa"
                    v-if="record.series.operator == 1"
                    src="@/assets/lt.png"
                    alt=""
                  />
                  <img
                    class="imgsa"
                    v-if="record.series.operator == 2"
                    src="@/assets/dx.png"
                    alt=""
                  />
                  <img
                    class="imgsa"
                    v-if="record.series.operator == 3"
                    src="@/assets/gd.png"
                    alt=""
                  />
                  <span>{{ record.card }}</span>
                  <icon-copy
                    class="aa"
                    size="18"
                    style="color: #3491fa; padding-left: 5px"
                    @click="useCommon.copy(record.card)"
                  />

                  <icon-search
                    class="aa"
                    size="18"
                    style="color: #3491fa; padding-left: 5px"
                    @click="detailFn(record)"
                  />
                </div>
              </template>
              <template v-if="item.key === 'online'" #cell="{ record }">
                <a-tag color="blue" v-if="record.online == 0">在线</a-tag>
                <a-tag v-else-if="record.online == 1">离线</a-tag>
                <a-tag v-else>未知</a-tag>
              </template>
              <template v-if="item.key === 'used'" #cell="{ record }">
                {{ Math.floor((record.used / 1024) * 100) / 100 }} G
              </template>
              <template v-if="item.key === 'free'" #cell="{ record }">
                <span v-if="record.free != undefined"
                  >{{ Math.floor((record.free / 1024) * 100) / 100 }}G</span
                >
                <span v-else> 无限</span>
              </template>
              <template v-if="item.key === 'officialRealName'" #cell="{ record }">
                <a-tag color="blue" v-if="record.officialRealName == 0">已实名</a-tag>
                <a-tag color="red" v-else-if="record.officialRealName == 1">未实名</a-tag>
                <a-tag v-else>未知</a-tag>
              </template>
              <template v-if="item.key === 'cardRealName'" #cell="{ record }">
                <a-tag color="blue" v-if="record.systemRealName == 0">已实名</a-tag>
                <a-tag color="red" v-else-if="record.systemRealName == 1">已失败</a-tag>
                <a-tag color="red" v-else>未实名</a-tag>
              </template>
              <template v-if="item.key === 'userId'" #cell="{ record }">
                <a-tag color="blue" v-if="record.userId">已分销</a-tag>
                <a-tag color="red" v-else>未分销</a-tag>
              </template>
              <template v-if="item.key === 'cancellationGroupId'" #cell="{ record }">
                <a-tag color="blue" v-if="record.cancellationGroupId">已注销</a-tag>
                <a-tag color="red" v-else>未注销</a-tag>
              </template>
              <template v-if="item.key === 'firstPayTime'" #cell="{ record }">
                <a-tag color="blue" v-if="record.firstPayTime">已充值</a-tag>
                <a-tag color="red" v-else>未充值</a-tag>
              </template>
              <template v-if="item.key === 'speedLimitTagId'" #cell="{ record }">
                <a-tag color="blue" v-if="record.speedLimitTagId">已限速</a-tag>
                <a-tag color="red" v-else>未限速</a-tag>
              </template>
              <template v-if="item.key === 'changeGroupId'" #cell="{ record }">
                <a-tag color="blue" v-if="record.changeGroupId">已换卡</a-tag>
                <a-tag color="red" v-else>未换卡</a-tag>
              </template>
              <template v-if="item.key === 'exceptionType'" #cell="{ record }">
                <a-tag color="red" v-if="record.exceptionName">{{ record.exceptionName }}</a-tag>
                <a-tag color="blue" v-else>正常</a-tag>
              </template>
              <template v-else-if="item.key === 'series'" #cell="{ record }">
                {{ record.series.showName }}
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>管理员 </span>
              </template>
              <template v-else-if="item.key === 'stateName'" #cell="{ record }">
                <a-tag :color="record.stateName.color">{{ record.stateName.name }}</a-tag>
              </template>
              <template v-else-if="item.key === 'flowRefreshTime'" #cell="{ record }">
                <span v-if="record.flowRefreshTime">{{ record.flowRefreshTime }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-else-if="item.key === 'stateRefreshTime'" #cell="{ record }">
                <span v-if="record.stateRefreshTime">{{ record.stateRefreshTime }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-else-if="item.key === 'realNameRefreshTime'" #cell="{ record }">
                <span v-if="record.realNameRefreshTime">{{ record.realNameRefreshTime }}</span>
                <span v-else>- - -</span>
              </template>
              <template v-else-if="item.key === 'channel'" #cell="{ record }">
                {{ record.series.channel.name }}
              </template>

              <template v-else-if="item.key === 'balance'" #cell="{ record }">
                {{ '￥' + record.balance }}
              </template>
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="RefreshFn(record)"
                    >刷新</a-button
                  >
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="stopFn(record)"
                    >停机</a-button
                  >
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="startFn(record)"
                    >复机</a-button
                  >
                  <a-dropdown :popup-max-height="false" trigger="hover">
                    <a-button
                      type="text"
                      style="margin-right: 5px; padding: 0px; font-size: 24px; color: #000000"
                      size="small"
                      >···</a-button
                    >
                    <template #content>
                      <a-doption @click="detailFn(record)">卡板详情</a-doption>
                      <a-doption @click="mealFn(record)">套餐充值</a-doption>
                      <!-- <a-doption @click="balanceFn(record.id, record.balance)">充值余额</a-doption> -->
                      <!-- <a-doption @click="passWordFn(record.id)">修改密码</a-doption> -->
                      <!-- <a-doption @click="cancelFn(record.card)">卡板注销</a-doption> -->
                    </template>
                  </a-dropdown>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div
          style="
            border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
            border-top: 0;
            padding: 12px;
            text-align: left;
          "
          >统计：总流量:{{ Math.floor(((total.used + total.free) / 1024) * 100) / 100 }}G
          <span style="margin-left: 10px"
            >已用流量:{{ Math.floor((total.used / 1024) * 100) / 100 }}G</span
          >
          <span style="margin-left: 10px"
            >剩余流量: {{ Math.floor((total.free / 1024) * 100) / 100 }}G</span
          >
          <!-- <span style="margin-left: 10px"
            >上游已用流量: {{ Math.floor((total.upstream_flow / 1024) * 100) / 100 }}G</span
          >
          <span style="margin-left: 10px">卡板余额:{{ total.balance }}元</span> -->
        </div>
      </template>
      <template #footer>
        <TableFooter :pagination="pagination" />
      </template>
    </TableBody>
    <!-- 删除操作 -->
    <a-modal
      v-model:visible="deleteVisible"
      @before-close="handleCancelDelete"
      title="删除操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="deleteForms" :model="deleteForm" :auto-label-width="true">
        <a-form-item label="删除卡号" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="deleteForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="deleteForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="deleteForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="删除备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input v-model="deleteForm.remarks" placeholder="请输入删除备注" allow-clear />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button :loading="loading1" @click="handleBeforeOkDeletes">检测</a-button>
          <a-button type="primary" :loading="loadings" @click="handleBeforeOkDelete">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 回收操作 -->
    <a-modal
      v-model:visible="retrieveVisible"
      @before-close="handleCancelRetrieve"
      title="回收操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="retrieveForms" :model="retrieveForm" :auto-label-width="true">
        <a-form-item label="回收卡号" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio
                style="margin-top: 10px; margin-bottom: 20px"
                v-model="checked1"
                value="seach"
              />
            </a-col>
            <a-col :span="22">
              <div style="text-align: left; margin-top: 5px; margin-bottom: 20px"
                >当前搜索条件下
              </div>
            </a-col>
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="retrieveForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="retrieveForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="retrieveForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="回收备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input v-model="retrieveForm.remarks" placeholder="请输入回收备注" allow-clear />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button :loading="loading1" @click="handleCancelRetrieve">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="handleBeforeOkRetrieves"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 参数分配 -->
    <a-modal
      v-model:visible="parameterVisible"
      @before-close="handleCancelParameter"
      title="参数分配"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form
        class="huakaClass"
        ref="parameterForms"
        :model="parameterForm"
        :auto-label-width="true"
      >
        <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="parameterForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="parameterForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="parameterForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="seriesId"
          label="操作类型"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          :rules="[{ required: true, message: '请选择系列' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />
            <a-col :span="22">
              <a-select v-model="parameterForm.seriesId" placeholder="请选择系列" allow-clear>
                <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                  item.name
                }}</a-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="分配备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input
                v-model="parameterForm.remarks"
                placeholder="请输入参数分配备注"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button :loading="loading1" @click="handleBeforeOkParameters">检测</a-button>
          <a-button type="primary" :loading="loadings" @click="handleBeforeOkParameter"
            >确定</a-button
          >
        </a-space>
      </template>
    </a-modal>
    <!-- 分销操作 -->
    <a-modal
      v-model:visible="huakavisible"
      @before-close="handleCancelhuaka"
      title="分销操作"
      width="660px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form class="huakaClass" ref="huakaForms" :model="huakaForm" :auto-label-width="true">
        <a-form-item
          field="userId"
          label="分销客户"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          :rules="[{ required: true, message: '客户不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />
            <a-col :span="22">
              <a-select
                v-model="huakaForm.userId"
                placeholder="请选择客户"
                allow-clear
                :options="userList"
                :virtual-list-props="{ height: 200 }"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="分销卡号" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio
                style="margin-top: 10px; margin-bottom: 20px"
                v-model="checked1"
                value="seach"
              />
            </a-col>
            <a-col :span="22">
              <div style="text-align: left; margin-top: 5px; margin-bottom: 20px"
                >当前搜索条件下
              </div>
            </a-col>
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="orderly" />
            </a-col>
            <a-col :span="10">
              <a-form-item
                hide-asterisk
                field="addCard"
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入开始卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="huakaForm.addCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入开始卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
            </a-col>
            <a-col :span="10">
              <a-form-item
                field="endCard"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  { required: checked1 == 'orderly' ? true : false, message: '请输入结束卡号' },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-input
                  v-model="huakaForm.endCard"
                  :disabled="checked1 == 'orderly' ? false : true"
                  placeholder="请输入结束卡号"
                  allow-clear
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="cardMultiline"
          :content-flex="false"
          hide-asterisk
          :merge-props="false"
          :rules="[{ required: checked1 == 'disOrder' ? true : false, message: '卡号不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2">
              <a-radio style="margin-top: 10px" v-model="checked1" value="disOrder" />
            </a-col>
            <a-col :span="22">
              <a-textarea
                :auto-size="{
                  minRows: 10,
                }"
                v-model="huakaForm.cardMultiline"
                :disabled="checked1 == 'disOrder' ? false : true"
                placeholder="请输入卡号，一行一个"
                allow-clear
              />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remarks"
          label="分销备注"
          hide-asterisk
          :content-flex="false"
          :merge-props="false"
          asterisk-position="end"
        >
          <a-row :gutter="24">
            <a-col :span="2" />

            <a-col :span="22">
              <a-input v-model="huakaForm.remarks" placeholder="请输入划卡备注" allow-clear />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <a-divider type="dashed" :margin="20">常见问题</a-divider>
      <a-collapse>
        <a-collapse-item header="为什么会有不可划卡卡号，具体是什么意思？" key="1">
          <div>1：不可划卡卡号指的卡号是已经划卡给下级客户 </div>
          <div>2：解决方法：将不可划卡的卡号进行回收操作，再次划卡就可以划卡了</div>
        </a-collapse-item>
      </a-collapse>
      <template #footer>
        <a-space>
          <a-button :loading="loading1" @click="handleCancelhuaka">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="handleBeforeOkhuakas">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 提示弹窗 -->
    <a-modal
      v-model:visible="jiancevisible"
      @before-close="jiancevisible = false"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <template #title> 操作结果 </template>
      <!-- <p style="text-align: center; font-size: 16px">{{ names }}卡号数据： </p> -->
      <a-alert type="warning" :show-icon="false">
        <div style="text-align: center; font-size: 13px"
          >{{ names }}卡号数据：总{{ names }}卡号：<span style="color: #3491fa"
            >{{ jianceForm.total }}张</span
          >，可{{ names }}卡号：<span style="color: #3491fa">{{ jianceForm.success }}张</span
          >，不可{{ names }}卡号：<span style="color: #3491fa">{{ jianceForm.error }}张</span></div
        >
      </a-alert>
      <a-alert style="margin-top: 20px" type="error" :show-icon="false">
        <div style="text-align: center; font-size: 13px; color: #f53f3f">
          {{ names }}时一定要仔细核实好卡号和数量，避免造成不可挽回的损失</div
        >
      </a-alert>
      <p v-if="jianceForm.repeats" style="text-align: center; font-size: 16px"
        >重复卡号数据：<span style="color: #3491fa" v-for="item in jianceForm.repeats" :key="item"
          >{{ item }}&nbsp; &nbsp;</span
        >
      </p>
      <p v-if="jianceForm.notExists" style="text-align: center; font-size: 16px"
        >不存在卡号数据：<span
          style="color: #3491fa"
          v-for="item in jianceForm.notExists"
          :key="item"
          >{{ item }}&nbsp; &nbsp;</span
        >
      </p>
    </a-modal>
    <!-- 操作结果 -->
    <a-modal
      v-model:visible="jieguo"
      @before-close="jieguo = false"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <template #title> 检测结果 </template>
      <!-- <p style="text-align: center; font-size: 16px">{{ names }}卡号数据： </p> -->
      <div v-if="jianceForm.total > 1000">
        <a-alert type="warning" :show-icon="false">
          <div style="font-size: 13px">
            正在进行操作卡板{{ names }}，{{ names }}总数量{{
              jianceForm.total
            }}张，该操作不可逆，一旦操作成功数据将会改变。请输入下面内容再次确认操作。</div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            我确认操作总数量{{ jianceForm.total }}张卡的{{ names }}，确认操作无误</div
          >
        </a-alert>
        <a-input
          v-model="errorValue"
          style="margin-top: 20px"
          placeholder="请输入'确认操作'后，点击确定"
          :error="error"
          onpaste="return false"
        />
        <div style="font-size: 13px; margin-top: 10px"
          >当前操作只有在操作数量超过1000张的时候才会出现，只是为了避免操作失误</div
        >
      </div>
      <div v-else>
        <a-alert type="warning" :show-icon="false">
          <div style="text-align: center; font-size: 13px"
            >{{ names }}卡号数据：总{{ names }}卡号：<span style="color: #3491fa"
              >{{ jianceForm.total }}张</span
            >，可{{ names }}卡号：<span style="color: #3491fa">{{ jianceForm.success }}张</span
            >，不可{{ names }}卡号：<span style="color: #3491fa"
              >{{ jianceForm.error }}张</span
            ></div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            {{ names }}时一定要仔细核实好卡号和数量，避免造成不可挽回的损失</div
          >
        </a-alert>
        <p v-if="jianceForm.repeats" style="text-align: center; font-size: 16px"
          >重复卡号数据：<span style="color: #3491fa" v-for="item in jianceForm.repeats" :key="item"
            >{{ item }}&nbsp; &nbsp;</span
          >
        </p>
        <p v-if="jianceForm.notExists" style="text-align: center; font-size: 16px"
          >不存在卡号数据：<span
            style="color: #3491fa"
            v-for="item in jianceForm.notExists"
            :key="item"
            >{{ item }}&nbsp; &nbsp;</span
          >
        </p>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="jieguo = false">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="conset">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="cardsVisible = false"
      title="多卡搜索"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form :auto-label-width="true" :model="form">
        <a-form-item field="remarks" hide-label>
          <a-textarea v-model="card" placeholder="请输入卡号，一行一个" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 卡板注销 -->
    <a-modal
      v-model:visible="cancelVisible"
      @before-close="cancelCFn"
      title="卡板注销"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="cancelRef" :auto-label-width="true" :model="cancelForm">
        <a-form-item
          field="cancellationGroupId"
          label="注销分类"
          :rules="[{ required: true, message: '注销分类不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-select
            v-model="cancelForm.cancellationGroupId"
            placeholder="请选择注销分类"
            allow-clear
          >
            <a-option v-for="item in cancelMold" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="cancelCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="cancelSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 修改密码 -->
    <a-modal
      v-model:visible="passWordVisible"
      @before-close="passWordCFn"
      title="修改密码"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="passWordRef" :auto-label-width="true" :model="passWordForm">
        <a-form-item
          field="passWord"
          label="新密码"
          :rules="[{ required: true, message: '新密码不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model="passWordForm.passWord" placeholder="请输入新密码" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="passWordCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="passWordSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 充值余额 -->
    <a-modal
      v-model:visible="balanceVisible"
      @before-close="balanceCFn"
      title="充值余额"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="balanceRef" :auto-label-width="true" :model="balanceForm">
        <a-form-item field="balance" label="卡板余额">
          <span style="color: #3491fa">{{ balanceForm.balance1 }} 元</span>
        </a-form-item>
        <a-form-item field="type" label="充值类型">
          <a-radio-group v-model="balanceForm.type">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">加款</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">扣款</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="2">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">最终金额</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          field="balance"
          label="充值金额"
          :rules="[{ required: true, message: '充值金额不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model="balanceForm.balance" placeholder="请输入充值金额" allow-clear />
        </a-form-item>
        <a-form-item
          field="remark"
          label="充值备注"
          :rules="[{ required: true, message: '充值备注不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model="balanceForm.remark" placeholder="请输入充值备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="balanceCFn">取消</a-button>
          <a-button type="primary" :loading="loadings" @click="balanceSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 充值套餐 -->
    <a-modal
      v-model:visible="mealVisible"
      @before-close="mealCFn"
      title="充值套餐"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="mealRef" :auto-label-width="true" :model="mealForm">
        <a-form-item label="充值套餐" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                hide-asterisk
                field="setMealId"
                validate-trigger="input"
                :rules="[{ required: true, message: '请选择充值套餐' }]"
                no-style
                asterisk-position="end"
              >
                <a-select
                  v-model="mealForm.setMealId"
                  @change="changeMeal"
                  placeholder="请选择充值套餐"
                  allow-clear
                >
                  <a-option v-for="item in meal" :key="item.id" :value="item.id">{{
                    item.showName
                  }}</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="订单时间" :content-flex="false" :merge-props="false">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item
                field="next"
                hide-asterisk
                validate-trigger="input"
                :rules="[
                  {
                    required: true,
                    message: '请选择充值类型',
                  },
                ]"
                no-style
                asterisk-position="end"
              >
                <a-radio-group class="radio-bcg" :disabled="lis" v-model="mealForm.next">
                  <a-radio :value="0">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">本月</div>
                      </div>
                    </template>
                  </a-radio>
                  <a-radio :value="1">
                    <template #radio="{ checked }">
                      <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                        <div className="custom-radio-card-mask">
                          <div className="custom-radio-card-mask-dot"></div> </div
                        ><div className="custom-radio-card-title">次月</div>
                      </div>
                    </template>
                  </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item
          field="remark"
          label="充值备注"
          :rules="[{ required: true, message: '充值备注不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model="mealForm.remark" placeholder="请输入充值备注" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="mealCFn">取消</a-button>
          <a-button type="primary" :loading="mealLoad" @click="mealSub">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 卡板详情 -->
    <a-modal
      v-model:visible="detailVisible"
      title="卡板详情"
      width="50%"
      @before-close="detailCloseFn"
      :mask-closable="false"
      title-align="start"
    >
      <a-tabs v-model:active-key="key" @change="changeTab">
        <a-tab-pane key="1" title="卡板信息">
          <a-descriptions bordered :column="2" align="center">
            <a-descriptions-item label="卡板ID">{{ detail.id }}</a-descriptions-item>
            <a-descriptions-item label="显示卡号">{{ detail.card }}</a-descriptions-item>
            <a-descriptions-item label="客户账号"
              ><span v-if="detail.user">{{ detail.user.userName }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
            <a-descriptions-item label="所属系列">{{ detail.series.showName }}</a-descriptions-item>
            <a-descriptions-item label="运营商">
              <span v-if="detail.series.operator == 0">中国移动</span>
              <span v-if="detail.series.operator == 1">中国联通</span>
              <span v-if="detail.series.operator == 2">中国电信</span>
              <span v-if="detail.series.operator == 3">中国广电</span></a-descriptions-item
            >
            <!-- <a-descriptions-item label="卡板余额">{{ detail.balance }} 元</a-descriptions-item> -->
            <a-descriptions-item label="卡板状态">
              <a-tag :color="detail.stateName.color">{{
                detail.stateName.name
              }}</a-tag></a-descriptions-item
            >
            <a-descriptions-item label="充值状态">
              <a-tag color="blue" v-if="detail.firstPayTime">已充值</a-tag>
              <a-tag color="red" v-else>未充值</a-tag></a-descriptions-item
            >
            <a-descriptions-item label="系统实名">
              <a-tag color="blue" v-if="detail.cardRealName">已实名</a-tag>
              <a-tag color="red" v-else>未实名</a-tag></a-descriptions-item
            >
            <a-descriptions-item label="官方实名"
              ><a-tag color="blue" v-if="detail.officialRealName == 0">已实名</a-tag>
              <a-tag color="red" v-else-if="detail.officialRealName == 1">未实名</a-tag>
              <a-tag v-else>未知</a-tag></a-descriptions-item
            >
            <a-descriptions-item label="注销状态">
              <a-tag color="blue" v-if="detail.cancellationGroupId">已注销</a-tag>
              <a-tag color="red" v-else>未注销</a-tag></a-descriptions-item
            >
            <a-descriptions-item label="充值次数">{{ detail.payNumber }}</a-descriptions-item>
            <a-descriptions-item label="流量更新"
              ><span v-if="detail.flowRefreshTime">{{ detail.flowRefreshTime }}</span>
              <span v-else>- - - </span></a-descriptions-item
            >
            <a-descriptions-item label="状态更新"
              ><span v-if="detail.stateRefreshTime">{{ detail.stateRefreshTime }}</span>
              <span v-else>- - - </span></a-descriptions-item
            >
            <a-descriptions-item label="实名更新"
              ><span v-if="detail.realNameRefreshTime">{{ detail.realNameRefreshTime }}</span>
              <span v-else>- - - </span></a-descriptions-item
            >
          </a-descriptions>
        </a-tab-pane>
        <a-tab-pane key="2" title="时间信息">
          <a-descriptions bordered :column="2" align="center">
            <a-descriptions-item label="首充套餐时间">
              <span v-if="detail.firstPayTime">{{ detail.firstPayTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
            <a-descriptions-item label="最近充值套餐时间"
              ><span v-if="detail.flowRefreshTime">{{ detail.lastPayTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
            <!-- <a-descriptions-item label="首充余额时间"
              ><span v-if="detail.flowRefreshTime">{{ detail.flowRefreshTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
            <a-descriptions-item label="最近充余额时间"
              ><span v-if="detail.flowRefreshTime">{{ detail.flowRefreshTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            > -->
            <!-- <a-descriptions-item label="首充优惠卷时间"
              ><span v-if="detail.flowRefreshTime">{{ detail.flowRefreshTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
            <a-descriptions-item label="最近充优惠卷时间"
              ><span v-if="detail.flowRefreshTime">{{ detail.flowRefreshTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            > -->
            <a-descriptions-item label="首次登录时间"
              ><span v-if="detail.firstLoginTime">{{ detail.firstLoginTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
            <a-descriptions-item label="最近登录时间"
              ><span v-if="detail.lastLoginTime">{{ detail.lastLoginTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
            <a-descriptions-item label="套餐到期时间"
              ><span v-if="detail.expirationTime">{{ detail.expirationTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
            <a-descriptions-item label="最后到期时间"
              ><span v-if="detail.expirationTime">{{ detail.expirationTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
          </a-descriptions>
        </a-tab-pane>
        <!-- <a-tab-pane key="3" title="套餐信息">
          <a-descriptions bordered :column="2" align="center">
            <a-descriptions-item label="所属渠道">
              {{ detail.series.channel.name }}
            </a-descriptions-item>
            <a-descriptions-item label="所属系列">{{ detail.series.name }}</a-descriptions-item>
            <a-descriptions-item label="所有套餐" :span="2"
              ><a-tag color="arcoblue">Lark</a-tag>
              <span v-if="detail.flowRefreshTime">{{ detail.flowRefreshTime }}</span>
              <span v-else>- - - - </span></a-descriptions-item
            >
          </a-descriptions>
        </a-tab-pane> -->
        <a-tab-pane key="5" title="充值记录">
          <a-table :columns="columns1" :loading="load1" :pagination="false" :data="rebateList">
            <template #columns>
              <a-table-column
                v-for="item of columns1"
                :key="item.key"
                align="left"
                :title="(item.title as string)"
                :ellipsis="true"
                :tooltip="true"
              >
                <template v-if="item.key === 'setMealName'" #cell="{ record }">
                  <span>{{ record.setMealName }}</span>
                </template>
                <template v-if="item.key === 'createTime'" #cell="{ record }">
                  <span>{{ record.createTime }}</span>
                </template>
                <template v-if="item.key === 'effective'" #cell="{ record }">
                  <a-tag color="blue" v-if="record.effectiveState == 0">立即生效</a-tag>
                  <a-tag color="blue" v-else-if="record.effectiveState == 1">本月生效</a-tag>
                  <a-tag color="blue" v-if="record.effectiveState == 2">次月生效</a-tag>
                  <a-tag color="blue" v-else-if="record.effectiveState == 3">月底顺延</a-tag>
                  <a-tag color="blue" v-if="record.effectiveState == 4">跨月顺延</a-tag>
                </template>
                <template v-if="item.key === 'state'" #cell="{ record }">
                  <a-tag color="red" v-if="record.state == 4">退款</a-tag>
                  <a-tag color="blue" v-else-if="record.state == 3">失败</a-tag>
                  <a-tag color="blue" v-else-if="record.state == 2">成功</a-tag>
                  <a-tag color="blue" v-else-if="record.state == 1">进行</a-tag>
                  <a-tag color="blue" v-else-if="record.state == 0">等待</a-tag>
                  <a-tag color="blue" v-else-if="record.state == -1">删除</a-tag></template
                >
                <template v-else-if="item.key === 'payType'" #cell="{ record }">
                  <div v-if="record.payType == 0"> 余额</div>
                  <div v-if="record.payType == 1"> 支付宝</div>
                  <div v-if="record.payType == 2"> 微信</div>
                  <div v-if="record.payType == 3"> 接口</div>
                  <div v-if="record.payType == 4"> 批量</div>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <TableFooter :pagination="pagination1" />
        </a-tab-pane>
        <a-tab-pane key="8" title="智能检测">
          <div class="table">
            <div class="title">
              <div class="name">检测类型</div>
              <div class="name">检测描述</div>
              <div class="name">检测结果</div>
            </div>
            <div class="list">
              <div class="names">卡板状态</div>
              <div class="names"
                ><a-tag v-if="detail.id" :color="detail.stateName.color">{{
                  detail.stateName.name
                }}</a-tag></div
              >
              <div class="names">
                <span v-if="detail.id && detail.state == 0" style="color: #3491fa">正常</span>
                <span v-else style="color: #f53f3f">异常</span>
              </div>
            </div>
            <div class="list">
              <div class="names">总流量</div>
              <div class="names"
                ><span v-if="detail.free != undefined">
                  {{ Math.floor(((detail.used + detail.free) / 1024) * 100) / 100 }}G</span
                >
                <span v-else>无限</span></div
              >
              <div class="names"
                ><span v-if="detail.id && detail.free == 0" style="color: #f53f3f">异常</span>
                <span v-else style="color: #3491fa">正常</span></div
              >
            </div>
            <div class="list">
              <div class="names">已用流量</div>
              <div class="names"
                ><span v-if="detail.used != undefined"
                  >{{ Math.floor((detail.used / 1024) * 100) / 100 }}G</span
                >
                <span v-else> - - -</span></div
              >
              <div class="names"
                ><span v-if="detail.id && detail.used != undefined" style="color: #3491fa"
                  >正常</span
                >
                <span v-else style="color: #f53f3f">异常</span></div
              >
            </div>
            <div class="list">
              <div class="names">剩余流量</div>
              <div class="names"
                ><span v-if="detail.free != undefined"
                  >{{ Math.floor((detail.free / 1024) * 100) / 100 }}G</span
                >
                <span v-else>无限</span></div
              >
              <div class="names"
                ><span v-if="detail.id && detail.free == 0" style="color: #f53f3f">异常</span>
                <span v-else style="color: #3491fa">正常</span></div
              >
            </div>
            <div class="list">
              <div class="names">在线状态</div>
              <div class="names"
                ><span v-if="detail.online === 0">在线</span>
                <span v-if="detail.online === 1">离线</span>
                <span v-else>未知</span></div
              >
              <div class="names"
                ><span v-if="detail.online == 0" style="color: #3491fa">正常</span>
                <span v-else style="color: #f53f3f">异常</span></div
              >
            </div>
            <div class="list">
              <div class="names">官方实名</div>
              <div class="names"
                ><a-tag color="blue" v-if="detail.officialRealName == 0">已实名</a-tag>
                <a-tag v-else-if="detail.officialRealName == 1">未实名</a-tag>
                <a-tag v-else>未知</a-tag></div
              >
              <div class="names"
                ><span v-if="detail.id && detail.officialRealName == 0" style="color: #3491fa"
                  >正常</span
                >
                <span v-else style="color: #f53f3f">异常</span></div
              >
            </div>
            <div class="list">
              <div class="names">到期时间</div>
              <div class="names"
                ><span v-if="detail.expirationTime">{{ detail.expirationTime }}</span>
                <span v-else>- - -</span></div
              >
              <div class="names"
                ><span v-if="detail.id && detail.expirationTime" style="color: #3491fa">正常</span>
                <span v-else style="color: #f53f3f">异常</span></div
              >
            </div>
            <div class="list">
              <div class="names">检测结果</div>
              <div
                v-if="
                  !detail.exceptionType &&
                  detail.officialRealName == 0 &&
                  detail.free > 0 &&
                  detail.firstPayTime &&
                  detail.state == 0
                "
                class="namesa"
                style="color: #3491fa; line-height: 25px; padding: 10px"
                >检测结果一切正常，若仍然无法使用，请引导客户设置APN然后重启设备，等待5分钟后重试【无需设置APN的请直接忽略】</div
              >
              <div v-else class="namesa" style="color: red">
                <span v-if="detail.state != 0">当前卡号状态异常</span>
                <span v-else-if="!detail.firstPayTime">当前卡号未充值套餐</span>
                <span v-else-if="detail.officialRealName !== 0">当前卡号未官方实名</span>
                <span v-else-if="detail.free <= 0">当前流量已用完</span>
                <span v-else-if="detail.chong">{{ detail.chong }}</span>
                <span v-else-if="detail.disconnectionId">达量断网停机</span>
                <span v-else-if="detail.free">
                  <span v-if="detail.free + detail.used <= 0 && !detail.firstPayTime"
                    >当前卡号未充值本月套餐</span
                  >
                  <span
                    v-else-if="
                      detail.state == 4 &&
                      !detail.exceptionType &&
                      detail.firstPayTime &&
                      detail.free > 0
                    "
                    >网络异常</span
                  >
                </span>
                <span v-else-if="!detail.free">
                  <span v-if="detail.used <= 0 && !detail.firstPayTime"
                    >当前卡号未充值本月套餐</span
                  >
                  <span
                    v-else-if="detail.state == 4 && !detail.exceptionType && detail.firstPayTime"
                    >网络异常</span
                  >
                </span>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 批量操作 -->
    <a-modal
      v-model:visible="batchShow"
      title="批量操作"
      width="40%"
      :mask-closable="false"
      title-align="start"
      @before-close="closeBatch"
    >
      <div class="pilianglokolo">
        <a-tabs v-model:active-key="activeBatch" type="line" position="left" @tab-click="tabclicks">
          <a-tab-pane key="1" title="批量刷新">
            <a-form
              class="huakaClass"
              ref="batchRef"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <!-- <a-form-item
                field="time"
                label="时间间隔"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '时间间隔不能为空' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input-number
                      v-model="batchForm.time"
                      placeholder="请输入时间间隔"
                      allow-clear
                      hide-button
                      :min="3"
                    >
                      <template #suffix> 秒 </template>
                    </a-input-number>
                  </a-col>
                </a-row>
              </a-form-item> -->
              <a-form-item
                field="remarks"
                label="操作类型"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-radio-group class="radio-bcg" v-model="batchForm.type">
                      <a-radio :value="3">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">三合一刷新</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">使用流量</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">卡板状态</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="2">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">官方实名</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="2" title="停机复机">
            <a-form
              class="huakaClass"
              ref="batchRef1"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn1"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="seach" />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <!-- <a-form-item
                field="time"
                label="时间间隔"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '时间间隔不能为空' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input-number
                      v-model="batchForm.time"
                      placeholder="请输入时间间隔"
                      allow-clear
                      hide-button
                      :min="3"
                    >
                      <template #suffix> 秒 </template>
                    </a-input-number>
                  </a-col>
                </a-row>
              </a-form-item> -->
              <a-form-item
                field="remarks"
                label="操作类型"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-radio-group class="radio-bcg" v-model="batchForm.type">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">停机</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div> </div
                            ><div className="custom-radio-card-title">复机</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="5" title="充值套餐">
            <a-form
              class="huakaClass"
              ref="batchRef4"
              :model="batchForm"
              :auto-label-width="true"
              @submit="batchRefFn4"
            >
              <a-form-item label="操作方式" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio
                      style="margin-top: 10px"
                      @click="cardMealFna"
                      v-model="batchChecked"
                      value="seach"
                    />
                  </a-col>
                  <a-col :span="22">
                    <div style="text-align: left; margin-top: 5px">当前搜索条件下 </div>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" />
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      hide-asterisk
                      field="addCard"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入开始卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        @change="cardMealFn"
                        v-model="batchForm.addCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入开始卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :span="2">
                    <div style="height: 1px; background-color: #000; margin-top: 16px"></div>
                  </a-col>
                  <a-col :span="10">
                    <a-form-item
                      field="endCard"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: batchChecked == 'orderly' ? true : false,
                          message: '请输入结束卡号',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-input
                        v-model="batchForm.endCard"
                        :disabled="batchChecked == 'orderly' ? false : true"
                        placeholder="请输入结束卡号"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item
                field="cardMultiline"
                :content-flex="false"
                hide-asterisk
                :merge-props="false"
                :rules="[
                  {
                    required: batchChecked == 'disOrder' ? true : false,
                    message: '卡号不能为空',
                  },
                ]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2">
                    <a-radio style="margin-top: 10px" v-model="batchChecked" value="disOrder" />
                  </a-col>
                  <a-col :span="22">
                    <a-textarea
                      :auto-size="{
                        minRows: 10,
                      }"
                      @change="cardMealFns"
                      v-model="batchForm.cardMultiline"
                      :disabled="batchChecked == 'disOrder' ? false : true"
                      placeholder="请输入卡号，一行一个"
                      allow-clear
                    />
                  </a-col>
                </a-row>
              </a-form-item>
              <!-- <a-form-item
                field="time"
                label="时间间隔"
                hide-asterisk
                :content-flex="false"
                :merge-props="false"
                :rules="[{ required: true, message: '时间间隔不能为空' }]"
                :validate-trigger="['change', 'input']"
                asterisk-position="end"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input-number
                      v-model="batchForm.time"
                      placeholder="请输入时间间隔"
                      allow-clear
                      hide-button
                      :min="3"
                    >
                      <template #suffix> 秒 </template>
                    </a-input-number>
                  </a-col>
                </a-row>
              </a-form-item> -->
              <a-form-item label="充值套餐" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2">
                    <!-- <a-radio style="margin-top: 10px" v-model="batchChecked" value="orderly" /> -->
                  </a-col>
                  <a-col :span="22">
                    <a-form-item
                      hide-asterisk
                      field="setMealId"
                      validate-trigger="input"
                      :rules="[
                        {
                          required: checked1 == 'disOrder' ? false : true,
                          message: '请选择充值套餐',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-select
                        @change="changeMeals"
                        v-model="batchForm.setMealId"
                        placeholder="请选择充值套餐"
                        allow-clear
                      >
                        <a-option v-for="item in batchMealList" :key="item.id" :value="item.id">{{
                          item.showName
                        }}</a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item label="订单时间" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-form-item
                      field="next"
                      hide-asterisk
                      validate-trigger="input"
                      :rules="[
                        {
                          required: true,
                          message: '请选择充值类型',
                        },
                      ]"
                      no-style
                      asterisk-position="end"
                    >
                      <a-radio-group class="radio-bcg" :disabled="lis" v-model="batchForm.next">
                        <a-radio :value="0">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">本月</div>
                            </div>
                          </template>
                        </a-radio>
                        <a-radio :value="1">
                          <template #radio="{ checked }">
                            <div
                              style="display: flex"
                              :class="{ 'custom-radio-card-checked': checked }"
                            >
                              <div className="custom-radio-card-mask">
                                <div className="custom-radio-card-mask-dot"></div> </div
                              ><div className="custom-radio-card-title">次月</div>
                            </div>
                          </template>
                        </a-radio>
                      </a-radio-group>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form-item>

              <a-form-item
                field="remarks"
                label="充值备注"
                asterisk-position="end"
                :content-flex="false"
                :merge-props="false"
              >
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-input v-model="batchForm.remarks" placeholder="请输入充值备注" allow-clear />
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-button type="primary" html-type="submit" long>立即执行</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
              <a-form-item v-if="batchList.length > 0" :content-flex="false" :merge-props="false">
                <a-row :gutter="24">
                  <a-col :span="2" />
                  <a-col :span="22">
                    <a-row style="margin-bottom: 10px">
                      <a-col :span="6"> 卡板数量:{{ batchList.length }} </a-col>
                      <a-col :span="6"> 成功数量:{{ zong.success }} </a-col>
                      <a-col :span="6"> 失败数量{{ zong.error }} </a-col>
                    </a-row>
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22" style="margin-bottom: 10px">
                    <a-progress
                      :show-text="false"
                      size="large"
                      :percent="(zong.success + zong.error) / batchList.length"
                    />
                  </a-col>
                  <a-col :span="2" />
                  <a-col :span="22">
                    <div
                      style="
                        width: 100%;
                        height: 100px;
                        background-color: #f2f3f5;
                        overflow-y: scroll;
                        padding: 0 15px;
                      "
                    >
                      <div v-for="item in errorList" :key="item">
                        {{ item }}
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-form>
          </a-tab-pane>
        </a-tabs>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
    <!-- 提示弹窗 -->
    <a-modal
      v-model:visible="batchJian"
      @before-close="batchJian = false"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <template #title> 检测结果 </template>
      <div v-if="list.length > 100">
        <a-alert type="warning" :show-icon="false">
          <div style="font-size: 13px">
            正在进行操作卡板，{{ nameBatch }}总数量{{
              list.length
            }}张，该操作不可逆，一旦操作成功数据将会改变。请输入下面内容再次确认操作。</div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            我确认操作总数量{{ list.length }}张卡的{{ nameBatch }}，确认操作无误</div
          >
        </a-alert>
        <a-input
          v-model="batchValue"
          style="margin-top: 20px"
          placeholder="请输入'确认操作'后，点击确定"
          :error="error"
          onpaste="return false"
        />
        <div style="font-size: 13px; margin-top: 10px"
          >当前操作只有在操作数量超过100张的时候才会出现，只是为了避免操作失误</div
        >
      </div>
      <div v-else>
        <a-alert type="warning" :show-icon="false">
          <div style="text-align: center; font-size: 13px"
            >{{ nameBatch }}卡号数据：{{ nameBatch }}数量：<span style="color: #3491fa"
              >{{ list.length }}张</span
            ></div
          >
        </a-alert>
        <a-alert style="margin-top: 20px" type="error" :show-icon="false">
          <div style="text-align: center; font-size: 13px; color: #f53f3f">
            操作时一定要仔细核实好卡号和数量，避免造成不可挽回的损失</div
          >
        </a-alert>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="batchJian = false">取消</a-button>
          <a-button type="primary" @click="batchQue">确定</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import useCommonStore from '@/store/modules/common'
  import * as http from '@/api/http'
  import {
    parameterPostOrderly,
    parameterPostDisOrder,
    postOrderlyCheckParameter,
    postDisOrderCheckParameter,
    deletePostOrderly,
    deletePostDisOrder,
    postOrderlyCheckDelete,
    postDisOrderCheckDelete,
    updateCancelLise,
    balance,
    passWord,
  } from '@/api/url'
  import {
    getUserCardList,
    exportUserCardList,
    postOrderly,
    postDisOrder,
    postOrderlyCheck,
    postDisOrderCheck,
    recoveryPostOrderly,
    recoveryPostDisOrder,
    postOrderlyCheckRecovery,
    postDisOrderCheckRecovery,
    orderList,
    start,
    refresh,
    stop,
    orderpay,
    userMeal,
    getCardId,
    byCard,
    cardStatistics,
  } from '@/api/user'
  import md5 from 'js-md5'
  import { formpost, get } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { onMounted, onUnmounted, reactive, ref } from 'vue'
  const useCommon = useCommonStore()
  const table = useTable()
  const pagination = usePagination(doRefresh)
  const rowKey = useRowKey('id')
  const jieguo = ref(false)
  const visible = ref(false)
  const visibleEdit = ref(false)
  const huakavisible = ref(false)
  const jiancevisible = ref(false)
  const cardsVisible = ref(false)
  const parameterVisible = ref(false)
  const pagination1 = usePagination(doRefreshOrder)
  const retrieveVisible = ref(false)
  const deleteVisible = ref(false)
  const cancelVisible = ref(false)
  const detailVisible = ref(false)
  const passWordVisible = ref(false)
  const balanceVisible = ref(false)
  const balanceRef = ref()
  const mealVisible = ref(false)
  const mealRef = ref()
  const cancelRef = ref()
  const passWordRef = ref()
  const disabled = ref(false)
  const huakaForms = ref<typeof Form>()
  const parameterForms = ref<typeof Form>()
  const retrieveForms = ref<typeof Form>()
  const deleteForms = ref<typeof Form>()
  const checked1: any = ref('orderly')
  const load1 = ref(false)
  const rebateList = ref([])
  const types = ref('flowRefreshTime')
  const typesNum = ref('')
  const errorValue = ref('')
  const key = ref('1')
  const jianceForm: any = ref({
    repeats: [],
    notExists: [],
  })
  const detail: any = ref({
    series: { name: '系列名字', channel: { name: '测试1' } },
    stateName: { name: '系列名字', color: '' },
  })
  const channel: any = ref([])
  const series: any = ref([])
  const meal: any = ref([])
  // const cancelType: any = ref([])
  const cancelMold: any = ref([])
  const card: any = ref('')
  const names: any = ref('')
  const loadings: any = ref(false)
  const loading1: any = ref(false)
  const scroll = {
    x: 1500,
  }
  const columns1 = [
    {
      title: '套餐名称',
      key: 'setMealName',
    },
    {
      title: '订单时间',
      key: 'effective',
    },
    {
      title: '充值途径',
      key: 'payType',
    },
    {
      title: '充值时间',
      key: 'createTime',
    },
    {
      title: '订单状态',
      key: 'state',
    },
  ]
  const huakaForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    userId: '',
    cardMultiline: '',
  })

  const cancelForm: any = reactive({
    cardMultiline: '',
    cancellationGroupId: '',
  })

  const balanceForm: any = reactive({
    id: '',
    balance: '',
    type: '',
    remark: '',
    balance1: '',
  })

  const mealForm: any = reactive({
    cardId: '',
    next: 0,
    setMealId: '',
    remark: '',
  })

  const passWordForm: any = reactive({
    id: '',
    passWord: '',
  })

  const parameterForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    seriesId: '',
    cardMultiline: '',
  })

  const retrieveForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    cardMultiline: '',
  })

  const deleteForm: any = reactive({
    addCard: '',
    endCard: '',
    remarks: '',
    cardMultiline: '',
  })

  const form = reactive({
    addPayNumber: '',
    endPayNumber: '',
    addId: '',
    endId: '',
    channelId: '',
    seriesIds: '',
    operator: '',
    addCard: '',
    endCard: '',
    direct: '',
    systemRealName: '',
    userIds: '',
    states: '', //卡板状态 -1未知 0正常 1库存 2待激活 3已激活 4已停机
    officialRealName: '', //	官方实名 -1未知 0未实名 1已实名
    pay: '',
    speedLimit: '',
    addCreateTime: '',
    endCreateTime: '',
    addFlowRefreshTime: '',
    endFlowRefreshTime: '',
    cards: '',
    cancellation: '',
    change: '',
    exceptionType: '',
    flowRefreshTime: '', //   流量刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    stateRefreshTime: '', //   状态刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    realNameRefreshTime: '', //  实名刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    sort: '',
    asc: '',
  })

  //排序
  function handleChange(data, extra, currentDataSource) {
    if (extra.sorter) {
      form.sort = extra.sorter.field
      if (extra.sorter.direction == 'ascend') {
        form.asc = true
      } else {
        form.asc = false
      }
    } else {
      form.sort = ''
      form.asc = ''
    }
    console.log('change', data, extra, currentDataSource)
    doRefresh(1)
  }

  const subFormEdit = ref({
    userName: '', //用户名
    profit: '', //分润比例
    api: false, //是否有调用接口权限
    batchRecharge: false, //是否有批量充值权限
    collection: false, //是否有自收款权限
    cardLogin: true, //是否有充值前端登录权限
    cardOperation: true, //是否有卡操作权限(停机, 复机)
    customSetRealName: true, //是否有套餐名称修改权限
    customLogo: true, //是否有自定义logo权限
  })
  const total: any = ref({})

  const userList: any = ref([])
  const tableColumns: any = reactive({
    list: [
      {
        title: '客户账号',
        key: 'userName',
        dataIndex: 'userName',
        checked: true,
        width: 130,
      },
      {
        title: '卡号',
        key: 'card',
        dataIndex: 'card',
        checked: true,
        width: 270,
      },
      {
        title: '总流量',
        key: 'total',
        dataIndex: 'total',
        checked: true,
        width: 120,
      },
      {
        title: '已用流量',
        key: 'used',
        dataIndex: 'used',
        checked: true,
        width: 120,
        sortable: {
          sortDirections: ['ascend', 'descend'],
        },
      },
      {
        title: '剩余流量',
        key: 'free',
        dataIndex: 'free',
        checked: true,
        width: 120,
        sortable: {
          sortDirections: ['ascend', 'descend'],
        },
      },
      {
        title: '卡板状态',
        key: 'stateName',
        dataIndex: 'stateName',
        checked: true,
        width: 100,
      },
      // {
      //   title: '异常类型',
      //   key: 'exceptionType',
      //   dataIndex: 'exceptionType',
      //   checked: true,
      //   width: 100,
      // },
      {
        title: '在线状态',
        key: 'online',
        dataIndex: 'online',
        checked: true,
        width: 100,
      },
      {
        title: '充值状态',
        key: 'firstPayTime',
        dataIndex: 'firstPayTime',
        checked: true,
        width: 100,
      },
      {
        title: '系统实名',
        key: 'cardRealName',
        dataIndex: 'cardRealName',
        checked: true,
        width: 100,
      },
      {
        title: '官方实名',
        key: 'officialRealName',
        dataIndex: 'officialRealName',
        checked: true,
        width: 100,
      },
      // {
      //   title: '限速状态',
      //   key: 'speedLimitTagId',
      //   dataIndex: 'speedLimitTagId',
      //   checked: true,
      //   width: 100,
      // },
      {
        title: '注销状态',
        key: 'cancellationGroupId',
        dataIndex: 'cancellationGroupId',
        checked: true,
        width: 100,
      },
      {
        title: '换卡状态',
        key: 'changeGroupId',
        dataIndex: 'changeGroupId',
        checked: true,
        width: 100,
      },
      {
        title: '分销状态',
        key: 'userId',
        dataIndex: 'userId',
        checked: true,
        width: 100,
      },
      // {
      //   title: '所属渠道',
      //   key: 'channel',
      //   dataIndex: 'channel',
      //   checked: true,
      //   width: 100,
      // },
      {
        title: '所属系列',
        key: 'series',
        dataIndex: 'series',
        checked: true,
        width: 100,
      },
      {
        title: '流量更新',
        key: 'flowRefreshTime',
        dataIndex: 'flowRefreshTime',
        checked: true,
        width: 200,
      },
      {
        title: '状态更新',
        key: 'stateRefreshTime',
        dataIndex: 'stateRefreshTime',
        checked: true,
        width: 200,
      },
      {
        title: '实名更新',
        key: 'realNameRefreshTime',
        dataIndex: 'realNameRefreshTime',
        checked: true,
        width: 200,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 180,
        align: 'center',
        checked: true,
      },
    ],
  })
  // const state = ref([
  //   {
  //     id: 1,
  //     name: '全部卡板',
  //     img: '',
  //     number: 20000,
  //     introduce: '产生过订单的卡板',
  //   },
  //   {
  //     id: 2,
  //     name: '活跃卡板',
  //     img: '',
  //     number: 20000,
  //     introduce: '最近30天产生过订单的卡板',
  //   },
  //   {
  //     id: 3,
  //     name: '新增卡板',
  //     img: '',
  //     number: 10000,
  //     introduce: '最近30天新增并且产生订单记录的卡板',
  //   },
  //   {
  //     id: 4,
  //     name: '余额卡板',
  //     img: '',
  //     number: 10000,
  //     introduce: '近30天充值过余额的卡板',
  //   },
  //   {
  //     id: 5,
  //     name: '流失卡板',
  //     img: '',
  //     number: 10000,
  //     introduce: '近90天产生过订单的卡板',
  //   },
  // ])
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const batchChecked = ref('orderly')
  const batchShow = ref(false)
  const batchForm = ref({
    addCard: '',
    endCard: '',
    time: 3,
    type: 0,
    cardMultiline: '',
    balance: 0,
    setMealId: '',
    next: 0,
    upstream: 1,
    remarks: '',
  })
  function batchShowFn() {
    lis.value = false
    batchForm.value = {
      addCard: '',
      endCard: '',
      time: 3,
      type: 0,
      cardMultiline: '',
      balance: 0,
      setMealId: '',
      next: 0,
      upstream: 1,
      remarks: '',
    }
    batchList.value = []
    activeBatch.value = '1'
    nameBatch.value = '刷新'
    batchShow.value = true
  }
  const batchRef = ref()
  const batchRef1 = ref()
  const batchRef2 = ref()
  const batchList: any = ref([])
  const zong = ref({
    success: 0,
    error: 0,
  })
  const batchJian = ref()
  const list = ref([])
  const intervalId = ref()
  const count = ref(0)
  const set: any = ref({})
  const errorList: any = ref([])
  const batchValue = ref('')
  const nameBatch = ref('刷新')
  const activeBatch = ref('1')
  function closeBatch() {
    clearInterval(intervalId.value)
    batchList.value = []
    batchShow.value = false
  }
  const batchMealList = ref()
  function tabclicks(val: any) {
    if (val == '1') {
      nameBatch.value = '刷新'
    } else if (val == '2') {
      nameBatch.value = '停机复机'
    } else if (val == '5') {
      nameBatch.value = '充值套餐'
      useCommon.usermealListFn().then((res) => {
        batchMealList.value = res.data
      })
    }
    batchForm.value = {
      addCard: '',
      endCard: '',
      time: 3,
      type: 0,
      cardMultiline: '',
      balance: 0,
      setMealId: '',
      next: 0,
      upstream: 1,
      remarks: '',
    }
    batchChecked.value = 'orderly'
    batchList.value = []
    clearInterval(intervalId.value)
    console.log(nameBatch.value)
  }
  function requestApi(item: any, card: any) {
    // 这里放置你的请求代码，item是列表中的元素
    fetch(item)
      .then((response) => response.json())
      .then((res) => {
        count.value++ // 增加计数器
        if (res.status == true) {
          zong.value.success++
        } else {
          zong.value.error++
        }
        errorList.value.unshift(card + ':' + res.msg)
        if (count.value <= batchList.value.length && batchShow.value == true) {
          // 请求接口
          if (nameBatch.value == '刷新') {
            requestApi(
              `${refresh}?id=${batchList.value[count.value].id}&type=${
                set.value.type == 3 ? '' : set.value.type
              }`,
              batchList.value[count.value].card
            )
          } else if (nameBatch.value == '停机复机') {
            if (set.value.type == 0) {
              requestApi(
                `${stop}?id=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            } else {
              requestApi(
                `${start}?id=${batchList.value[count.value].id}`,
                batchList.value[count.value].card
              )
            }
          }
        } else {
        }
      })
      .catch((error) => console.log('Error:', error))
  }

  function requestApis(item: any, card: any) {
    // 这里放置你的请求代码，item是列表中的元素
    const formData = new FormData()
    formData.append('remarks', set.value.remarks)
    formData.append('upstream', set.value.upstream)
    formData.append('setMealId', set.value.setMealId)
    formData.append('next', set.value.next)
    formData.append('cardId', set.value.cardId)
    fetch(item, {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((res) => {
        count.value++ // 增加计数器
        if (res.status == true) {
          zong.value.success++
        } else {
          zong.value.error++
        }
        errorList.value.unshift(card + ':' + (res.status == true ? res.data.outTradeNo : res.msg))
        if (count.value <= batchList.value.length && batchShow.value == true) {
          set.value.cardId = batchList.value[count.value].id
          requestApis(`/app/user/order/pay`, batchList.value[count.value].card)
        }
      })
      .catch((error) => console.log('Error:', error))
  }

  function batchQue() {
    if (list.value.length > 100) {
      if (batchValue.value == '确认操作') {
        batchList.value = list.value
        // 请求接口
        if (nameBatch.value == '刷新') {
          requestApi(
            `${refresh}?id=${batchList.value[count.value].id}&type=${
              set.value.type == 3 ? '' : set.value.type
            }`,
            batchList.value[count.value].card
          )
        } else if (nameBatch.value == '停机复机') {
          if (set.value.type == 0) {
            requestApi(
              `${stop}?id=${batchList.value[count.value].id}`,
              batchList.value[count.value].card
            )
          } else {
            requestApi(
              `${start}?id=${batchList.value[count.value].id}`,
              batchList.value[count.value].card
            )
          }
        } else if (nameBatch.value == '充值套餐') {
          set.value.cardId = batchList.value[count.value].id
          requestApis(`/app/user/order/pay`, batchList.value[count.value].card)
        }

        batchJian.value = false
      } else {
        Message.error('请先确认操作')
      }
    } else {
      batchList.value = list.value

      // 请求接口
      if (nameBatch.value == '刷新') {
        requestApi(
          `${refresh}?id=${batchList.value[count.value].id}&type=${
            set.value.type == 3 ? '' : set.value.type
          }`,
          batchList.value[count.value].card
        )
      } else if (nameBatch.value == '停机复机') {
        if (set.value.type == 0) {
          requestApi(
            `${stop}?id=${batchList.value[count.value].id}`,
            batchList.value[count.value].card
          )
        } else {
          requestApi(
            `${start}?id=${batchList.value[count.value].id}`,
            batchList.value[count.value].card
          )
        }
      } else if (nameBatch.value == '充值套餐') {
        set.value.cardId = batchList.value[count.value].id
        requestApis(`/app/user/order/pay`, batchList.value[count.value].card)
      }

      batchJian.value = false
    }
  }

  const batchRef4 = ref()
  function changeMeal(val: any) {
    meal.value.forEach((item: any) => {
      if (item.id == val) {
        if (item.next) {
          lis.value = false
        } else {
          lis.value = true
        }
        mealForm.next = 0
      }
    })
  }
  // 充值套餐
  function batchRefFn4() {
    batchRef4.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 100) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 100) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 100) {
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }

  //刷新
  function batchRefFn() {
    console.log(batchChecked.value)
    batchRef.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 100) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 100) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 100) {
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }
  const detailCloseFn = () => {
    key.value = '1'
    detailVisible.value = false
  }
  // 停机复机
  function batchRefFn1() {
    console.log(batchChecked.value)
    batchRef1.value?.validate().then((error: any) => {
      if (!error) {
        batchList.value = []
        batchValue.value = ''
        count.value = 0
        zong.value = {
          success: 0,
          error: 0,
        }
        errorList.value = []
        clearInterval(intervalId.value)
        set.value = JSON.parse(JSON.stringify(batchForm.value))
        if (batchChecked.value == 'seach') {
          console.log(batchChecked.value)
          formpost({
            url: getCardId,
            data: () => {
              return {
                ...form,
                userIds: form.userIds.toString(),
                states: form.states.toString(),
                seriesIds: form.seriesIds.toString(),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 100) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'orderly') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                addCard: batchForm.value.addCard,
                endCard: batchForm.value.endCard,
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 100) {
                  list.value = res.data
                  batchJian.value = true
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        } else if (batchChecked.value == 'disOrder') {
          formpost({
            url: getCardId,
            data: () => {
              return {
                cards: batchForm.value.cardMultiline.split(/\n/g).join(','),
              }
            },
          })
            .then((res) => {
              if (res.code == 0) {
                if (res.data.length > 100) {
                } else if (res.data.length > 0) {
                  list.value = res.data
                  batchJian.value = true
                } else {
                  Message.error('无可操作的卡')
                }
              }
            })
            .catch(console.log)
        }
      }
    })
  }
  //复机
  function startFn(val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要恢复此卡吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: start,
          data: () => {
            return {
              id: val.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Modal.warning({
              title: '操作报文',
              content: res.msg,
              cancelText: '取消',
              titleAlign: 'start',
              hideCancel: false,
              okText: '确定',
              onOk: () => {},
            })
            doRefresh()
          }
        })
      },
    })
  }
  //停机
  function stopFn(val: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要停用此卡吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk: () => {
        get({
          url: stop,
          data: () => {
            return {
              id: val.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            Modal.warning({
              title: '操作报文',
              content: res.msg,
              cancelText: '取消',
              titleAlign: 'start',
              hideCancel: false,
              okText: '确定',
              onOk: () => {},
            })
            doRefresh()
          }
        })
      },
    })
  }

  //刷新
  function RefreshFn(val?: any) {
    get({
      url: refresh,
      data: () => {
        return {
          id: val.id,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        doRefresh()
      }
    })
  }
  function showAdd() {
    visible.value = true
  }

  function detailFn(val?: any) {
    if (val.series.shutdownEarly && val.series.shutdownEarlyType != null) {
      if (val.expirationTime) {
        const num = useCommon.getTimeDifferences1(val.expirationTime, val.series.shutdownEarlyType)
        if (num <= val.series.shutdownEarly) {
          val.chong = '未提前续费套餐停机'
        } else {
          val.chong = ''
        }
      } else {
        val.chong = ''
      }
    }
    detail.value = val
    key.value = '1'
    detailVisible.value = true
  }

  function passWordFn(val?: any) {
    passWordForm.id = val
    passWordVisible.value = true
  }

  const conset = () => {
    if (jianceForm.value.total < 1000) {
      if (names.value == '分销') {
        handleBeforeOkhuaka()
      } else if (names.value == '修改系列') {
        handleBeforeOkParameter()
      } else if (names.value == '回收') {
        handleBeforeOkRetrieve()
      } else if (names.value == '删除') {
        handleBeforeOkDelete()
      } else if (names.value == '备注') {
        jieguo.value = false
      }
    } else {
      if (errorValue.value == '确认操作') {
        error.value = false
        if (names.value == '分销') {
          handleBeforeOkhuaka()
        } else if (names.value == '修改系列') {
          handleBeforeOkParameter()
        } else if (names.value == '回收') {
          handleBeforeOkRetrieve()
        } else if (names.value == '删除') {
          handleBeforeOkDelete()
        } else if (names.value == '备注') {
          jieguo.value = false
        }
      } else {
        error.value = true
      }
    }
  }

  function doRefreshOrder(value?: any) {
    load1.value = true
    if (value) {
      pagination1.page = value
    }
    http
      .formpost({
        url: orderList,
        data: () => {
          return {
            page: pagination1.page,
            size: pagination1.pageSize,
            cards: detail.value.card,
          }
        },
      })
      .then((res) => {
        load1.value = false
        rebateList.value = res.data.list
        pagination1.setTotalSize((res.data as any).totalSize)
      })
      .catch(() => {
        load1.value = false
      })
  }

  function changeTab(key: any) {
    if (key == '5') {
      doRefreshOrder(1)
    }
  }

  function passWordSub() {
    passWordRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        formpost({
          url: passWord,
          data: () => {
            return {
              id: passWordForm.id,
              passWord: md5(passWordForm.passWord),
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              loadings.value = false
              passWordCFn()
              doRefresh()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }

  function balanceCFn() {
    balanceRef.value?.resetFields()
    balanceVisible.value = false
  }

  function balanceFn(val: any, val1: any) {
    balanceForm.id = val
    balanceForm.balance1 = val1
    balanceVisible.value = true
  }

  function balanceSub() {
    balanceRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        formpost({
          url: balance,
          data: () => {
            return {
              id: balanceForm.id,
              balance: balanceForm.balance,
              type: balanceForm.type,
              remarks: balanceForm.remark,
            }
          },
        })
          .then((res: any) => {
            if (res.code == 0) {
              Message.success('修改成功')
              loadings.value = false
              balanceCFn()
              doRefresh()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }

  function mealCFn() {
    mealRef.value?.resetFields()
    mealVisible.value = false
  }

  //获取卡板系列
  function cardMealFna() {
    batchMealList.value = []
    batchForm.value.setMealId = ''
    formpost({
      url: getCardId,
      data: () => {
        return {
          ...form,
          userIds: form.userIds.toString(),
          states: form.states.toString(),
          seriesIds: form.seriesIds.toString(),
        }
      },
    })
      .then((res) => {
        if (res.code == 0) {
          if (res.data.length > 0) {
            get({
              url: byCard,
              data: () => {
                return {
                  card: res.data[0].card,
                }
              },
            })
              .then((res) => {
                if (res.code == 0) {
                  console.log(res)
                  get({
                    url: userMeal,
                    data: () => {
                      return {
                        seriesIds: res.data.seriesId,
                      }
                    },
                  }).then((res) => {
                    if (res.code == 0) {
                      batchMealList.value = res.data
                    }
                  })
                }
              })
              .catch(() => {})
          }
        }
      })
      .catch(console.log)
  }

  //获取卡板系列
  function cardMealFn() {
    batchMealList.value = []
    if (batchForm.value.addCard.length > 0) {
      get({
        url: byCard,
        data: () => {
          return {
            card: batchForm.value.addCard,
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            console.log(res)
            get({
              url: userMeal,
              data: () => {
                return {
                  seriesIds: res.data.seriesId,
                }
              },
            }).then((res) => {
              if (res.code == 0) {
                batchMealList.value = res.data
              }
            })
          }
        })
        .catch(() => {})
    }
  }
  //获取卡板系列
  function cardMealFns() {
    let aap = batchForm.value.cardMultiline.split(/[(\r\n)\r\n]+/)
    batchMealList.value = []
    if (batchForm.value.cardMultiline.length > 0) {
      get({
        url: byCard,
        data: () => {
          return {
            card: aap[0],
          }
        },
      })
        .then((res) => {
          if (res.code == 0) {
            console.log(res)
            get({
              url: userMeal,
              data: () => {
                return {
                  seriesIds: res.data.seriesId,
                }
              },
            }).then((res) => {
              if (res.code == 0) {
                batchMealList.value = res.data
              }
            })
          }
        })
        .catch(() => {})
    }
  }
  const lis = ref(false)
  function changeMeals(val: any) {
    batchMealList.value.forEach((item: any) => {
      console.log('进来了')
      if (item.id == val) {
        if (item.next) {
          lis.value = false
        } else {
          lis.value = true
        }
        batchForm.value.next = 0
      }
    })
  }

  function mealFn(val: any) {
    lis.value = false
    get({
      url: userMeal,
      data: () => {
        return {
          seriesIds: val.seriesId,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        meal.value = res.data
      }
    })
    mealLoad.value = false
    mealForm.cardId = val.id
    mealVisible.value = true
  }

  const mealLoad = ref(false)

  function mealSub() {
    mealRef.value?.validate().then((error: any) => {
      if (!error) {
        mealLoad.value = true
        formpost({
          url: orderpay,
          data: {
            ...mealForm,
          },
        })
          .then((res) => {
            if (res.code == 0) {
              mealLoad.value = false
              Message.success('充值成功')
              mealCFn()
              doRefresh()
            }
          })
          .catch(() => {
            mealLoad.value = false
          })
      }
    })
  }

  function passWordCFn() {
    passWordRef.value?.resetFields()
    passWordVisible.value = false
  }

  function handleCancelRetrieve() {
    retrieveForms.value?.resetFields()
    retrieveVisible.value = false
    checked1.value = 'orderly'
    disabled.value = false
    loading1.value = false
    loadings.value = false
  }

  function cancelFn(val: any) {
    cancelVisible.value = true
    cancelForm.cardMultiline = val
  }

  function cancelSub() {
    cancelRef.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        http
          .formpost({
            url: updateCancelLise + '?cancellationGroupId=' + cancelForm.cancellationGroupId,
            data: () => {
              return {
                cardMultiline: cancelForm.cardMultiline,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              loadings.value = false
              doRefresh()
            }
          })
          .catch(() => {
            loadings.value = false
          })
      }
    })
  }

  function cancelCFn() {
    cancelRef.value?.resetFields()
    cancelVisible.value = false
    loadings.value = false
  }

  function handleCancelDelete() {
    deleteForms.value?.resetFields()
    deleteVisible.value = false
    checked1.value = 'orderly'
    disabled.value = false
    loading1.value = false
    loadings.value = false
  }

  function handleCancelParameter() {
    parameterForms.value?.resetFields()
    checked1.value = 'orderly'
    parameterVisible.value = false
    disabled.value = false
    loading1.value = false
    loadings.value = false
  }

  function cardsFn() {
    const arr = card.value.split(/\n/g)
    form.cards = arr.toString()
    cardsVisible.value = false
  }

  const handleBeforeOkDeletes = () => {
    deleteForms.value?.validate().then((error: any) => {
      if (!error) {
        loading1.value = true
        if (checked1.value == 'disOrder') {
          http
            .formpost({
              url: postDisOrderCheckDelete,
              data: () => {
                return {
                  remarks: deleteForm.remarks,
                  cardMultiline: deleteForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                loading1.value = false
                names.value = '回收'
                jianceForm.value = res.data
                jiancevisible.value = true
              }
            })
            .catch(() => {
              loading1.value = false
            })
        } else {
          http
            .post({
              url: postOrderlyCheckDelete,
              data: () => {
                return {
                  addCard: deleteForm.addCard,
                  endCard: deleteForm.endCard,
                  remarks: deleteForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '回收'
                loading1.value = false
                jianceForm.value = res.data
                jiancevisible.value = true
              }
            })
            .catch(() => {
              loading1.value = false
            })
        }
      }
    })
  }
  const handleBeforeOkDelete = () => {
    deleteForms.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'disOrder') {
          http
            .formpost({
              url: deletePostDisOrder,
              data: () => {
                return {
                  remarks: deleteForm.remarks,
                  cardMultiline: deleteForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '回收'
                jianceForm.value = res.data
                jiancevisible.value = true
                loadings.value = false

                doRefresh()
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          http
            .post({
              url: deletePostOrderly,
              data: () => {
                return {
                  addCard: deleteForm.addCard,
                  endCard: deleteForm.endCard,
                  remarks: deleteForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '回收'
                jianceForm.value = res.data
                jiancevisible.value = true
                loadings.value = false

                doRefresh()
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }

  const handleBeforeOkRetrieves = () => {
    retrieveForms.value?.validate().then((error: any) => {
      if (!error) {
        cardLists.value = ''
        loading1.value = true
        if (checked1.value == 'orderly') {
          http
            .post({
              url: postOrderlyCheckRecovery,
              data: () => {
                return {
                  addCard: retrieveForm.addCard,
                  endCard: retrieveForm.endCard,
                  remarks: retrieveForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '回收'
                loadings.value = false
                jianceForm.value = res.data
                if (res.data.total >= 1000) {
                  console.log('进来了')
                  jieguo.value = true
                } else {
                  jieguo.value = true
                }
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          if (checked1.value == 'seach') {
            formpost({
              url: getCardId,
              data: () => {
                return {
                  ...form,
                  userIds: form.userIds.toString(),
                  states: form.states.toString(),
                  seriesIds: form.seriesIds.toString(),
                }
              },
            })
              .then((res) => {
                if (res.code == 0) {
                  const card = []
                  res.data.forEach((element: any) => {
                    card.push(element.card)
                  })
                  cardLists.value = card.join('\n')
                  huiWuFn(card.join('\n'))
                }
              })
              .catch(console.log)
          } else {
            huiWuFn(retrieveForm.cardMultiline)
          }
        }
      }
    })
  }
  //无序回收卡板检测
  function huiWuFn(val: any) {
    http
      .formpost({
        url: postDisOrderCheckRecovery,
        data: () => {
          return {
            remarks: retrieveForm.remarks,
            cardMultiline: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          names.value = '回收'
          loadings.value = false
          jianceForm.value = res.data
          if (res.data.total >= 1000) {
            console.log('进来了')
            jieguo.value = true
          } else {
            jieguo.value = true
          }
        }
      })
      .catch(() => {
        loadings.value = false
      })
  }
  const handleBeforeOkRetrieve = () => {
    retrieveForms.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'orderly') {
          http
            .post({
              url: recoveryPostOrderly,
              data: () => {
                return {
                  addCard: retrieveForm.addCard,
                  endCard: retrieveForm.endCard,
                  remarks: retrieveForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '回收'
                jianceForm.value = res.data
                errorValue.value = ''
                jieguo.value = false
                jiancevisible.value = true
                loadings.value = false
                retrieveForm.addCard = ''
                retrieveForm.endCard = ''
                retrieveForm.remarks = ''
                retrieveForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          http
            .formpost({
              url: recoveryPostDisOrder,
              data: () => {
                return {
                  remarks: retrieveForm.remarks,
                  cardMultiline:
                    checked1.value == 'seach' ? cardLists.value : retrieveForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '回收'
                jianceForm.value = res.data
                errorValue.value = ''
                jieguo.value = false
                jiancevisible.value = true
                loadings.value = false
                retrieveForm.addCard = ''
                retrieveForm.endCard = ''
                retrieveForm.remarks = ''
                retrieveForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }

  function getMeal() {
    useCommon.usermealListFn().then((res: any) => {
      meal.value = res.data
    })
  }

  function handleCancelhuaka() {
    huakaForms.value?.resetFields()
    huakavisible.value = false
    checked1.value = 'orderly'
    disabled.value = false
    loading1.value = false
    loadings.value = false
  }

  const handleBeforeOkParameters = () => {
    parameterForms.value?.validate().then((error: any) => {
      if (!error) {
        loading1.value = true
        if (checked1.value == 'disOrder') {
          http
            .formpost({
              url: postDisOrderCheckParameter,
              data: () => {
                return {
                  seriesId: parameterForm.seriesId,
                  remarks: parameterForm.remarks,
                  cardMultiline: parameterForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                loading1.value = false
                names.value = '参数分配'
                jianceForm.value = res.data
                jiancevisible.value = true
              }
            })
            .catch(() => {
              loading1.value = false
            })
        } else {
          http
            .post({
              url: postOrderlyCheckParameter + '?seriesId=' + parameterForm.seriesId,
              data: () => {
                return {
                  addCard: parameterForm.addCard,
                  endCard: parameterForm.endCard,
                  remarks: parameterForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                loading1.value = false
                names.value = '参数分配'
                jianceForm.value = res.data
                jiancevisible.value = true
              }
            })
            .catch(() => {
              loading1.value = false
            })
        }
      }
    })
  }
  const handleBeforeOkParameter = () => {
    parameterForms.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'disOrder') {
          http
            .formpost({
              url: parameterPostDisOrder,
              data: () => {
                return {
                  seriesId: parameterForm.seriesId,
                  remarks: parameterForm.remarks,
                  cardMultiline: parameterForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '参数分配'
                jianceForm.value = res.data
                jiancevisible.value = true
                loadings.value = false

                doRefresh()
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          http
            .post({
              url: parameterPostOrderly + '?seriesId=' + parameterForm.seriesId,
              data: () => {
                return {
                  addCard: parameterForm.addCard,
                  endCard: parameterForm.endCard,
                  remarks: parameterForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '参数分配'
                jianceForm.value = res.data
                jiancevisible.value = true
                loadings.value = false

                doRefresh()
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }
  const cardLists = ref('')
  const handleBeforeOkhuakas = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        cardLists.value = ''
        loadings.value = true
        if (checked1.value == 'orderly') {
          http
            .post({
              url: postOrderlyCheck + '?userId=' + huakaForm.userId,
              data: () => {
                return {
                  addCard: huakaForm.addCard,
                  endCard: huakaForm.endCard,
                  remarks: huakaForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '分销'
                loadings.value = false
                jianceForm.value = res.data
                if (res.data.total >= 1000) {
                  jieguo.value = true
                } else {
                  jieguo.value = true
                }
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          if (checked1.value == 'seach') {
            formpost({
              url: getCardId,
              data: () => {
                return {
                  ...form,
                  userIds: form.userIds.toString(),
                  states: form.states.toString(),
                  seriesIds: form.seriesIds.toString(),
                }
              },
            })
              .then((res) => {
                if (res.code == 0) {
                  const card = []
                  res.data.forEach((element: any) => {
                    card.push(element.card)
                  })
                  cardLists.value = card.join('\n')
                  fenWuFn(card.join('\n'))
                }
              })
              .catch(console.log)
          } else {
            fenWuFn(huakaForm.cardMultiline)
          }
        }
      }
    })
  }
  //无序分销检测
  function fenWuFn(val: any) {
    console.log(val)
    http
      .formpost({
        url: postDisOrderCheck,
        data: () => {
          return {
            userId: huakaForm.userId,
            remarks: huakaForm.remarks,
            cardMultiline: val,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          names.value = '分销'
          loadings.value = false
          jianceForm.value = res.data
          console.log(res.data)
          if (res.data.total >= 1000) {
            console.log('进来了')
            jieguo.value = true
          } else {
            jieguo.value = true
          }
        }
      })
      .catch(() => {
        loadings.value = false
      })
  }
  const handleBeforeOkhuaka = () => {
    huakaForms.value?.validate().then((error: any) => {
      if (!error) {
        loadings.value = true
        if (checked1.value == 'orderly') {
          http
            .post({
              url: postOrderly + '?userId=' + huakaForm.userId,
              data: () => {
                return {
                  addCard: huakaForm.addCard,
                  endCard: huakaForm.endCard,
                  remarks: huakaForm.remarks,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '分销'
                jianceForm.value = res.data
                errorValue.value = ''
                jiancevisible.value = true
                loadings.value = false
                jieguo.value = false
                huakaForm.userId = ''
                huakaForm.remarks = ''
                huakaForm.addCard = ''
                huakaForm.endCard = ''
                huakaForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        } else {
          http
            .formpost({
              url: postDisOrder,
              data: () => {
                return {
                  userId: huakaForm.userId,
                  remarks: huakaForm.remarks,
                  cardMultiline:
                    checked1.value == 'seach' ? cardLists.value : huakaForm.cardMultiline,
                }
              },
            })
            .then((res) => {
              if (res.code == 0) {
                names.value = '分销'
                jianceForm.value = res.data
                errorValue.value = ''
                jiancevisible.value = true
                loadings.value = false
                jieguo.value = false
                huakaForm.userId = ''
                huakaForm.remarks = ''
                huakaForm.addCard = ''
                huakaForm.endCard = ''
                huakaForm.cardMultiline = ''
                doRefresh(1)
              }
            })
            .catch(() => {
              loadings.value = false
            })
        }
      }
    })
  }

  const serchForm = ref()
  const resetSeach = () => {
    serchForm.value.resetFields()
    card.value = ''
    form.endId = ''
    // form.endBalance = '' //      结束余额
    // form.endUsed = '' //      结束已用
    // form.endFree = '' //      结束剩余
    // form.endUpstreamFlow = '' //      结束上游用量
    form.addPayNumber = ''
    form.endPayNumber = ''
    form.cards = ''
    types.value = 'flowRefreshTime'
    typesNum.value = ''
    form.flowRefreshTime = '' //   流量刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    form.stateRefreshTime = '' //   状态刷新时间 当为0时表示未刷新过 小于0时超出X小时未刷新 大于0时X小时内刷新过
    form.realNameRefreshTime = ''
    form.sort = ''
    form.asc = ''
    doRefresh(1)
  }

  const delimitation = (item: any) => {
    console.log(item)
    huakaForm.userId = item.id
    huakavisible.value = true
  }

  function updatUserPop(item: any) {
    subFormEdit.value = JSON.parse(JSON.stringify(item))
    visibleEdit.value = true
  }
  function cardStatisticsFn() {
    form[types.value] = typesNum.value
    formpost({
      url: cardStatistics,
      data: () => {
        return {
          ...form,
        }
      },
    })
      .then((res) => {
        total.value = res.data
      })
      .catch(console.log)
  }

  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    form[types.value] = typesNum.value
    formpost({
      url: getUserCardList,
      data: () => {
        return {
          page: pagination.page,
          size: pagination.pageSize,
          ...form,
          userIds: form.userIds.toString(),
          states: form.states.toString(),
          seriesIds: form.seriesIds.toString(),
        }
      },
    })
      .then((res) => {
        tableLoading.value = false
        res.data.list.forEach((item: any) => {
          useCommon.state.forEach((val: any) => {
            if (val.state == item.state) {
              item.stateName = val
            }
          })
          useCommon.error.forEach((val: any) => {
            if (val.state == item.exceptionType) {
              item.exceptionName = val.name
              item.exceptionForm = val
            }
          })
        })
        cardStatisticsFn()
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }

  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function getList() {
    useCommon.userListse().then((res: any) => {
      userList.value = res.data
    })
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }
  const loading = ref(false)
  const exportDepartments = () => {
    loading.value = true
    form[types.value] = typesNum.value
    useCommon
      .downLoadPosts(exportUserCardList, form, '客户卡板列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }
  function getchannel() {
    useCommon.getchannelList().then((res: any) => {
      channel.value = res.data
    })
  }
  function getseries() {
    useCommon.userseriess().then((res: any) => {
      series.value = res.data
    })
  }

  onUnmounted(() => {
    clearInterval(intervalId.value) // 组件销毁时清除定时器
  })

  onMounted(async () => {
    // await getTableDepartments()
    await doRefresh()
    await getList()
    await getchannel()
    await getseries()
    await getMeal()
  })
</script>

<style lang="less" scoped>
  .table {
    width: 100%;
    .title {
      padding: 0 1px;
      display: flex;
      background-color: var(--color-fill-1);
      .name {
        width: 33%;
        line-height: 45px;
        text-align: center;
        // background-color: var(--color-neutral-4);
      }
    }
    .list {
      box-sizing: border-box;
      display: flex;
      border-bottom: 1px solid var(--color-neutral-3);
      border-left: 1px solid var(--color-neutral-3);
      border-right: 1px solid var(--color-neutral-3);
      .names {
        width: 33%;
        line-height: 45px;
        text-align: center;
      }
      .namesa {
        width: 66%;
        line-height: 45px;
        text-align: center;
      }
    }
  }
  .pilianglokolo {
    :deep(.arco-tabs-tab) {
      padding: 0px !important;
      margin-right: 10px;
    }
    :deep(.arco-tabs-tab-active) {
      background-color: #e8f7ff !important;
    }
    :deep(.arco-tabs-nav-ink) {
      background-color: transparent !important;
    }

    :deep(.arco-tabs-tab-title:hover) {
      padding: 5px 20px !important;
      padding-right: 10px !important;
      margin-right: 10px !important;
    }
    :deep(.arco-tabs-tab-title) {
      padding: 5px 20px !important;
    }
    // :deep(.arco-tabs-nav-tab-list) {
    //   margin-right: 10px !important;
    // }
  }
  .top {
    margin-bottom: 20px;
    background-color: var(--color-bg-1);
    border-radius: 10px;

    .box {
      display: flex;
      align-items: center;
      height: 30px;
      margin: 5px 10px;

      .line {
        width: 5px;
        height: 25px;
        margin-right: 10px;
        background-color: #40a1ff;
      }

      .text {
        font-size: 16px;
        line-height: 25px;
        text-align: center;
      }
    }

    .flex {
      display: flex;
      justify-content: space-around;
      margin: 12px 7px;

      .dataBox:last-child {
        margin-right: 0px !important;
      }

      .dataBox {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-right: 20px;
        height: 150px;
        background-image: linear-gradient(rgb(var(--arcoblue-1)), #fff);
        border: 1px solid #f2f3f5;
        border-radius: 10px;

        .img {
          width: 70px;
          height: 70px;
          margin-right: 20px;
          border-radius: 50%;
        }

        .name {
          margin-top: 0;
        }

        .number {
          font-size: 22px;
        }
      }
    }
  }

  .avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;

    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .avatar-vip {
      border: 2px solid #cece1e;
    }

    .vip {
      position: absolute;
      top: 0;
      right: -9px;
      width: 15px;
      transform: rotate(60deg);
    }
  }
  .huakaClass :deep(.arco-form-item-message) {
    margin-left: 42px !important;
  }
  .gender-container {
    .gender-icon {
      width: 20px;
    }
  }
  .ba {
    display: flex;
    align-items: center;
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: none;
    }
  }

  .ba:hover {
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: block;
      width: 18px;
    }
  }
  .imgsa {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
</style>
<style>
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
</style>
